<!-- eslint-disable max-len -->
<template>
  <div :style="{background:'url('+loginBgUrl+') 0 0 / 100% 100% no-repeat',width: '100%',height: '100%','text-align':'center'}">
    <div
      style="font-weight: normal;margin: 0 auto;padding-top: 11rem;display: inline-block">
      <!-- <div class="logo"
           :style="{background:'url('+loginLoginUrl+') 0 0 / 100% 100% no-repeat',display: 'inline-block',height: '3rem',width: '2.5rem','margin-right': '0.8rem'}"></div> -->
      <div style="display:inline-block;padding-top: 0.1rem;">
        <span style="color: #e50012;font-weight: bold;width: 100%;line-height: 2.3rem;font-size: 2rem;letter-spacing: 1rem;">油站集团</span>
        <br/>
        <span style="color: #e50012;font-size: 0.78rem;width: 100%;text-align: left;letter-spacing: 0.25rem;
}">YOUZHANJITUAN</span>
      </div>
      <div style="display: inline-block;padding-top: 0.1rem;width: 18.5rem;float: right">
        <span style="color: rgb(1 170 230);font-weight: bold;width: 100%;line-height: 2.3rem;font-size: 2rem;letter-spacing: 1rem;">智慧经营平台</span>
        <span
          style="color: rgb(1 170 230);font-size: 0.78rem;width: 100%;letter-spacing: 0.4rem;">ZHIHUIJINGYINGPINGTAI</span>
      </div>
    </div>
    <div style="width: 60%;height: 50%;margin: 0 auto;margin-top: 3rem" class="login-body">
      <div style="width: 30%;height: 100%;background-color: rgba(225,225,225,0.3);float: left;text-align: center">
        <img :src="stationUrl" style="margin-top: 3rem;width: 80%;"/>
      </div>
      <div style="width: 70%;height: 100%;background-color: rgba(76 ,193, 236,0.5);float: left">
        <el-form label-position="top" ref="ruleFormsss" @keyup.enter.native="loginSubmit">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="loginForm.username" prefix-icon="el-icon-location-information" prop="stationName"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input v-model="loginForm.password" prefix-icon="el-icon-lock" show-password prop="password"/>
          </el-form-item>
          <el-form-item>
            <el-button class="login-bn" round @click="loginSubmit">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import {
  defineComponent, reactive, toRefs, ref, onMounted,
} from 'vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import esmRequire from 'esm';
import loginBgUrl from '@/assets/image/loginbg6.jpg';
import logoUrl from '@/assets/image/hflogo.png';
import stationUrl from '@/assets/image/statsion.png';
import loginLoginUrl from '@/assets/image/loginlogo.png';
import { login } from '@/api/dataScreen';

export default defineComponent({
  setup(prop, context) {
    const state = reactive(new class {
      loginForm: any = {
        username: '',
        password: '',
      }
    }());
    const router = useRouter();
    async function loginSubmit() {
      try {
        const {
          expiredTime,
          loginTime,
          token,
          username,
        } = await login(state.loginForm.username, state.loginForm.password);
        ElMessage({
          message: '登录成功',
          type: 'success',
        });
        sessionStorage.setItem('username', username);
        sessionStorage.setItem('expiredTime', expiredTime);
        sessionStorage.setItem('loginTime', loginTime);
        sessionStorage.setItem('token', token);
        sessionStorage.setItem('isLogin', 'success');
        setTimeout(async () => {
          await router.push('/');
        }, 500);
      } catch (e: any) {
        ElMessage.error(`登录失败${e.message}`);
        throw e;
      }
      // sessionStorage.setItem('isLogin', 'success');
      // await router.push('/');
    }
    return {
      ...toRefs(state),
      loginBgUrl,
      logoUrl,
      stationUrl,
      loginLoginUrl,
      loginSubmit,
    };
  },
  components: {
  },
});
</script>

<style scoped>
.logo {
  /*background: url("~./image/hflogo.png") 0 0 / 100% 100% no-repeat;*/
  width: 13.125rem;
  height: 2.5rem;
  /*position: absolute;*/
  /*right: 1%;*/
  /*top: 2%;*/
}
</style>
<style>
.login-body .el-form {
  margin: 0 auto 0 auto;
  width: 80%;
  padding: 10%;
}

.login-body .el-form .el-input__inner {
  height: 3.5rem;
  font-size: 1.2rem;
  /*border: 1px solid black;*/
  border-radius: 14px;
}

.login-body .el-form .el-form-item__label {
  font-size: 1.2rem;
  color: white;
}

.login-bn {
  width: 100%;
  height: 60px;
  background-color: #a13ad3;
  color: white;
  margin: 0 auto;
  margin-top: 3%;
  font-size: 1.2rem;
  border: none;
}
/*.login-bn:hover:before{*/
/*  background-color: #14045c;*/
/*  color: white;*/
/*}*/
</style>
